<template>
  <Layout>
    <Container name="驭龙研选">
      <div class="loading flex grow column" v-show="toLoding || toMore">
        <Loading v-show="toLoding" size="24px" vertical>加载中...</Loading>

        <img :src="PIC_URL + '/tlbypcWeb/wushuju.png'" v-show="toMore" alt="" />
      </div>
      <div
        class="flex grow column"
        style="width: 100%; height: 100%"
        v-show="articleList.length > 0"
      >
        <div class="covers flex grow column">
          <div class="items grow" ref="items">
            <div
              class="item fl"
              v-for="item in articleList"
              :key="item.articleId"
            >
              <img
                :src="item.src"
                @error="this.src = item.src"
                @click="showDetail(item)"
              />
            </div>
          </div>
        </div>
      </div>
    </Container>
    <div class="popup flex" v-show="showStatus">
      <ArticleDetail v-show="showStatus" v-bind:visible.sync="showStatus">
        <div class="title">{{ articleDetail.title }}</div>
        <div class="time">{{ articleDetail.time }}</div>
        <div
          class="txt"
          @click="viewImg($event)"
          v-html="articleDetail.detail"
        ></div>
      </ArticleDetail>
    </div>
    <openImg v-bind:imgSrc.sync="imgSrc"></openImg>
  </Layout>
</template>

<script>
import Layout from "@/component/Layout";
import Container from "@/component/Container";
import ArticleDetail from "@/component/ArticleDetail";
import openImg from "@/component/openImg";
import { Loading } from "vant";
// const coverImg = require(`${PIC_URL}/tlbypcWeb/cover.png`);
const coverImg = `http://ynimg.zx093.cn/tlbypcWeb/cover.png`;
import { imgPath, getUrlParams, isOneMinu } from "../../script/fn";
import format from "date-fns/format";
import {
  queryArticleStock,
  userClickUpdate,
  queryArticleList,
} from "../../api/api";
import stockPush from "../../script/stockPush";
import behavior from "@/utils/behavior";
const userData = { ...behavior };
import dayjs from "dayjs";

export default {
  components: { Layout, Loading, Container, ArticleDetail, openImg },
  data() {
    return {
      articleList: [],
      articleDetail: {
        title: "",
        time: "",
        detail: "",
        articleId: "",
      },
      toLoding: true,
      showStatus: false,
      toMore: false,
      imgSrc: "",
    };
  },

  mounted() {
    this.queryArticleStock();
  },
  methods: {
    async userClick() {
      const { token } = getUrlParams();
      let openTime = localStorage.getItem("openTime") || 1;
      if (openTime == null) {
        localStorage.setItem("openTime", "1");
      } else {
        localStorage.setItem("openTime", ++openTime);
      }
      userData.module.moduleCode = "0006";
      userData.user.token = token;
      userData.event[0].eventSubject.starttime = Date.now();
      userData.event[0].eventSubject.endtime = "";
      userData.event[0].eventCode = "00029";
      userData.event[0].eventSubject.objectkey = this.articleDetail.articleId;
      userData.event[0].eventSubject.extend.openTime = openTime;
      if (!isOneMinu()) return;
      await userClickUpdate(userData).then((data) => {
        if (data.status == 1) {
          // return data.data;
        }
      });
    },
    async queryArticleStock() {
      await queryArticleStock({
        productId:
          getUrlParams().productId || localStorage.getItem("productId"),
      }).then((back) => {
        if (back.status == 1) {
          this.ArticleStock = back.data;
          this.queryArticleList();
        }
      });
    },
    async queryArticleList() {
      const arr = this.ArticleStock.filter(
        (item) => item.articleTypeName == "驭龙研选"
      );
      if (!arr.length) return;
      await queryArticleList({
        articleType: arr[0].articleTypeId,
        limit: 12,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.toLoding = false;
          if (data.length == 0) return (this.toMore = true);
          this.articleList = data.map((item) => {
            // item.formatTime = format(item.publishTime, "yyyy-MM-dd HH:mm");
            item.formatTime = dayjs(item.publishTime).format(
              "YYYY-MM-DD HH:mm"
            );
            item.active = false;
            item.src = item.articleCover || coverImg;
            return item;
          });
        }
      });
    },
    //查看图片
    viewImg(e) {
      if (e.path[0].tagName == "IMG") {
        this.imgSrc = e.path[0].src;
      }
    },
    showDetail(data) {
      const { articleTitle, publishTime, articleContent, articleId } = data;
      this.articleDetail.title = articleTitle;
      // this.articleDetail.time = format(publishTime, "yyyy-MM-dd HH:mm");
      this.articleDetail.time = dayjs(publishTime).format("YYYY-MM-DD HH:mm");
      this.articleDetail.detail = imgPath(articleContent);
      this.articleDetail.articleId = articleId;
      this.userClick();
      // this.related = relationStock;
      this.showStatus = true;
    },
  },
};
</script>
<style>
.txt img {
  max-width: 100%;
}
</style>
<style scoped lang="scss">
.loading {
  justify-content: center;
  align-items: center;
}
.popup {
  position: fixed;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 5;
}
.covers {
  position: relative;
  .items {
    overflow: auto;
    height: 100%;
    padding: 0 40px;
  }
  .item {
    width: 220px;
    height: 303px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    margin: 0 16px 30px;
    img {
      width: 100%;
    }
  }
}
</style>
